<template>
	<view class="viewcontext">
		<view style="float: right;padding-right: 50rpx;" @click="handleRecord">反馈记录</view>
		<view class="feed">
			<view class="wenti">问题和意见</view>
			<uni-forms ref="form" :model="feed">
				<uni-forms-item name="feedDept">
					反馈部门：<uni-easyinput v-model="feed.feedDept" placeholder="请输入反馈部门"
						style="display: inline-block;width: 60vw;" />
				</uni-forms-item>
				<uni-forms-item name="feedContent">
					<textarea v-model="feed.feedContent" maxlength="-1" placeholder="简要描述你要反馈的问题和意见" />
				</uni-forms-item>
				<!-- <uni-forms-item>
					<view class="file">
						<label open-type="chooseImage" @tap="getImage">
							+
						</label>
					</view>
					<view class="preview-images">
						<image :src="imageUrl" class="preview-image" mode="aspectFit" />
					</view>
				</uni-forms-item> -->
				<uni-forms-item>
					<uni-file-picker :on-success="(row,file,FileList)=>handleTableFileUpload(scope.row,file,FileList)" :show-file-list="false"
						action="http://192.168.1.83:8080/file/upload">

					</uni-file-picker>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
	</view>
</template>

<script>
import {addFeed, uploadFeedImg} from "@/api/system/feed"

export default {
		data() {
			return {
				imageUrl: "",
				feed: {
					feedDept: "",
					feedContent: "",
					feedImg: null,
					feedStaff: this.$store.state.user.name,
					feedTime: "",
					feedStatus: "0"
				},
				rules: {
					feedDept: {
						rules: [{
							required: true,
							errorMessage: '反馈部门不能为空'
						}]
					},
					feedContent: {
						rules: [{
							required: true,
							errorMessage: '反馈内容不能为空'
						}]
					}
				},
			}
		},
		onLoad() {

		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {

			handleTableFileUpload(row, file, fileList) {
				console.log(row, file)
				console.log("111111")
				row.stuAvatar = file.response.msg //注意我们使用的是RuoYi框架中的AjaxResult结果集，返回的数据是在response下的msg中
				//触发更新
				//使用RuoYi中封装好的updateStudent()函数，将当前对象更新
				updateStudent(row).then(response => {
					if (response.code == '200') {
						this.$message.success("上传成功")
					} else {
						this.$message.success("上传失败")
					}
					this.form = response.data;
				});
			},
			handleRecord() {
				this.$tab.navigateTo('/pages/mine/feed/record')
			},
			getImage: function() {
				uni.chooseImage({
					count: 1, // 最多可以选择的图片数量


					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {

						const tempFilePaths = res.tempFilePaths;
						// 将新选择的图片路径添加到数组中
						this.imageUrl = tempFilePaths[0];
						this.feed.feedImg = tempFilePaths[0];

					}

				});

			},
			async uploadImage(filePath) {

				console.log('uploadImage123');
				console.log(filePath);
				try {
					const response = await uploadFeedImg({
						filePath,
						name: 'avatarfile' // 这里需要根据你的后端接口要求来设置
					});
					this.feed.feedImg = response.imgUrl; // 假设后端返回的图片URL在imgUrl字段中
					console.log(response)
				} catch (e) {
					console.error('图片上传失败', e);
				}
			},
			submit(ref) {
				this.$refs.form.validate().then(res => {
					// console.log(this.imageUrl, this.feed.feedImg);
					addFeed(this.feed).then(response => {
						this.$modal.msgSuccess("反馈成功")
						// this.feed = "";
						// this.imageUrl = "";
					})
				})
			}
		},
		created() {
			// this.handleTableFileUpload()
		}
	}
</script>

<style lang="scss">
	page {
		background: rgb(245, 245, 245);
		padding-bottom: 50rpx;
	}

	.viewcontext {
		width: 100vw;
		padding-top: 30rpx;
		position: relative;


		.feed {
			border-radius: 5%;
			background: white;
			margin: 0 20rpx 20rpx 20rpx;
			box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
			padding: 50rpx 25rpx 25rpx 25rpx;



			.wenti {
				font-size: 20px;
				font-weight: 800;
				/* margin-bottom: 10rpx; */
			}

			textarea {
				width: 100%;
				height: 350rpx;
				/* resize: none;
				padding: 10px;
				/* box-sizing: border-box; */
			}

			.file {
				width: 150rpx;
				/* height: 150rpx; */
				border: 1px solid black;
				margin: 0 0 30rpx 30rpx;
				text-align: center;
				line-height: 150rpx;
				font-size: 48px;
				color: rgb(206, 206, 206);

			}

			.preview-images {
				display: flex;
				flex-wrap: wrap;
				margin: 10rpx 10rpx;
			}

			.preview-image {
				width: 180rpx;
				height: 180rpx;
				margin: 0 10rpx;
			}


		}

		button {
			position: absolute;
			width: 50vw;
			left: 50%;
			transform: translateX(-50%);
			bottom: -300rpx;
			background: rgb(22, 155, 213);
		}
	}
</style>